<template>
    <div>
        <h3>优惠券列表</h3>
        优惠券名称:
        <input type="text" v-model="can.title">
        优惠券类型:
        <select v-model="can.disid">
            <option value="">请选择</option>
            <option :value="1">代金券</option>
            <option :value="2">折扣券</option>
            <option :value="3">兑换券</option>
        </select>
        <input type="button" value="查询" @click="show">
        <input type="button" value="增加" @click="add">
        <input type="button" value="批量删除" @click="delAll">
        <input type="button" value="批量发布" @click="UpdateStateAll(1)">
        <input type="button" value="批量不发布" @click="UpdateStateAll(0)">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox"  v-model="checked" @click="checkAll"></td>
                    <td>Id</td>
                    <td>优惠类型</td>
                    <td>优惠券标题</td>
                    <td>优惠券副标题</td>
                    <td>优惠券图片</td>
                    <td>是否发布</td>
                    <td>优惠券有效时间</td>
                    <td>操作</td>
          
                </tr>
                <tr v-for="item in data.list"  :key="item.Id">
                    <td><input type="checkbox" v-model="ids" :value="item.Id" @change="checkone"></td>
                    <td>{{item.Id}}</td>
                    <td>
                        <span v-if="item.DiscountType==1">代金券</span>
                        <span v-if="item.DiscountType==2">折扣券</span>
                        <span v-if="item.DiscountType==3">兑换券</span>
                    </td>
                    <td>{{item.Title}}</td>
                    <td>{{item.subTitle}}</td>
                    <td>
                        <img :src="item.Photo" width="100" height="100" alt="">
                    </td>
                    <td>{{ item.State?"发布":"未发布" }}</td>
                    <td>{{item.BeginTime}}-{{item.EndTime }}</td>
                    <td>
                        <input type="button" value="删除" @click="del(item.Id)">
                        <input type="button" value="修改" @click="upd(item.Id)">
                   
                    </td>
          
                </tr>
            </tbody>
        </table>

        <span>一共<b>{{ data.totalPage }}</b>页</span>
        <span>一共<b>{{data.totalCount  }}</b>行</span>
        <span>每页<b>{{ can.pageSize }}</b>行</span>
        <span>一共<b>{{ can.pageIndex }}</b>页<b>{{ data.totalPage }}</b>页</span>
        <select v-model="can.pageSize" @change="show">
          
            <option :value="item" v-for="item in arr">每页{{ item }}行</option>
        </select>
        <input type="button" value="首页" @click="fenye(1)">
        <input type="button" value="上一页" @click="fenye(can.pageIndex-1)">

        <span v-for="item in data.totalPage" @click="fenye(item)">{{item  }}</span>
        <input type="button" value="下一页" @click="fenye(can.pageIndex+1)">
        <input type="button" value="尾页" @click="fenye(data.totalPage)">
        <input type="number" v-model="can.pageIndex">
        <input type="button" value="跳转" @click="fenye(can.pageIndex)">
        
    </div>
</template>

<script setup lang="ts">
import{ref,reactive,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import axios from 'axios';
import moment from 'moment';
import {useUserStore} from '../../stores/user'




const router=useRouter();
const route=useRoute();
const UserStore=useUserStore();

const add=()=>{
    router.push('/discountAdd');
}

const upd=(id:any)=>{
    router.push({
        path:'/discountUpd',
        query:{
            id:id,
        }
    });
}

onMounted(()=>{
    getlist();
})
const delAll=()=>{
    if(ids.value.length==0){
        alert("请至少选中一项");
        return;
    }
    if(confirm("确认删除吗?")){
        axios({
            method:'delete',
            url:'/api/Discount/DelDisCount',
            params:{
                ids:ids.value.toString()
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert("删除成功");
                checked.value=false;
                ids.value=[];
                getlist();
            }
            else{
                alert("删除失败");
                checked.value=false;
                ids.value=[];
                return;
            }
        })
        .catch()
    }
}


const UpdateStateAll=(state:any)=>{  
    if(confirm("确认修改状态吗?")){
        axios({
            method:'put',
            url:'/api/Discount/UpdState',
           params:{
            ids:ids.value.toString(),
            state:state

           }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert("修改成功");
               checked.value=false;
               ids.value=[];
                getlist();
            }
            else{
                alert("修改失败");
                checked.value=false;
                ids.value=[];
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}
//反选
const checkone=()=>{
    if(ids.value.length==data.list.length)
    {
        checked.value=true;
    }
    else{
        checked.value=false;
    }
}


//全选全不选
const checkAll=()=>{
    checked.value=!checked.value;
    if(checked.value==true)
    {
        //将单个复选框里的id放到ids里去 将当前页面的列表里的id放到ids里去
        ids.value=data.list.map((item:any)=>{
            return item.Id;
        })
    }
    else{
        ids.value=[];
    }
}



//控制一个复选框选中与不选中
let checked=ref(false);
//控制多个复选框选中与没选中
let ids=ref([]);

const del=(id:any)=>{
    if(confirm("确认删除吗?")){
        axios({
            url:'/api/Discount/DelDisCount',
            method:'delete',
            params:{ids:id},
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert("删除成功");
                getlist();
            }
            else{
                alert("删除失败");
                return;
            }
        })
        .catch(err=>{
            console.log(err);
            
        })
    }
}

const show=()=>{
    can.pageIndex=1;
    getlist();
}
const arr=ref([2,4,6,8])
const fenye=(num:any)=>{
    if(num<1)
{
    can.pageIndex=1;
    return;
}
if(num>data.totalPage)
{
    can.pageIndex=data.totalPage;
    return;
}
    can.pageIndex=num;
    getlist();
}
const can=reactive({
    pageIndex:1,
    pageSize:2,
    title:'',
    disid:'',
})
const data:any=reactive({
    list:[],
    totalCount:1,
    totalPage:1,
})
const getlist=()=>{
    axios({
        method:'get',
        url:'/api/Discount/DisCountShows',
        params:can,
    })
    .then(res=>{
        console.log(res);
        data.list=res.data.list
        data.totalCount=res.data.totalCount
        data.totalPage=res.data.totalPage
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>